<template>
  <div class="setting-container">
    <el-form ref="form" :model="form" label-width="150px" label-position="left" class="setting-content">
      <div class="avatar-wrap">
        <el-upload
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeAvatarUpload"
          :action="uploadUrl"
          :headers="{ token: token}"
          name="upfile"
          class="avatar-uploader">
          <div class="avatar">
            <img :src="form.user_logo" class="" width="100%" height="100%" alt="头像">
          </div>
        </el-upload>
      </div>
      <el-form-item label="公司名称">
        <div class="item-wrap-read">{{ form.company_name }}</div>
      </el-form-item>
      <el-form-item label="公司名称(英)">
        <div class="item-wrap-read">{{ form.company_name_us }}</div>
      </el-form-item>
      <el-form-item label="服务类型">
        <div class="item-wrap-read">{{ showServiceType }}
        </div>
      </el-form-item>
      <el-form-item label="服务区域">
        <div class="item-wrap-read">
          <div v-if="form.service_region==1">国内</div>
          <div v-else>
            国外
          </div>
        </div>
      </el-form-item>
      <el-form-item label="服务对象">
        <div class="item-wrap-read">
          <div v-if="form.service_object===1">进口商</div>
          <div v-if="form.service_object===2">出口商</div>
          <div v-else>
            其他
          </div>
        </div>
      </el-form-item>
      <el-form-item label="公司注册地">
        <div class="item-wrap-read">{{ form.business_license_location }}</div>
      </el-form-item>
      <el-form-item label="公司地址">
        <div v-show="!showEidt.company_address_detail" class="item-wrap">
          <div class="item">
            {{ form.company_address_detail }}
          </div>
          <!--<div class="edit_info" @click="EidtInfo(1)"> 编辑</div>-->
        </div>

        <div v-show="showEidt.company_address_detail" class="item-wrap">
          <div class="item">
            <el-input v-model="form.company_address_detail" type="input"/>
          </div>
          <div class="bth_save" @click="onSubmit(1)">保存</div>
        </div>
      </el-form-item>
      <el-form-item label="公司地址(英)">
        <div v-show="!showEidt.company_address_detail_us" class="item-wrap">
          <div class="item">
            {{ form.company_address_detail_us }}
          </div>
          <div class="edit_info" @click="EidtInfo(2)"> 编辑</div>
        </div>

        <div v-show="showEidt.company_address_detail_us" class="item-wrap">
          <div class="item">
            <el-input v-model="form.company_address_detail_us" autosize type="textarea"/>
            <!--<el-input v-model="form.company_introduce_en" autosize type="textarea"/>-->
          </div>
          <div class="bth_save" @click="onSubmit(2)">保存</div>
        </div>
      </el-form-item>
      <el-form-item label="公司联系人">
        <div v-show="!showEidt.company_contacts" class="item-wrap">
          <div class="item">
            {{ form.company_contacts }}
          </div>
          <div class="edit_info" @click="EidtInfo(3)"> 编辑</div>
        </div>

        <div v-show="showEidt.company_contacts" class="item-wrap">
          <div class="item">
            <el-input v-model="form.company_contacts" type="input"/>
          </div>
          <div class="bth_save" @click="onSubmit(3)">保存</div>
        </div>
      </el-form-item>
      <el-form-item label="公司联系人(英)">
        <div v-show="!showEidt.company_contacts_us" class="item-wrap">
          <div class="item">
            {{ form.company_contacts_us }}
          </div>
          <div class="edit_info" @click="EidtInfo(4)"> 编辑</div>
        </div>

        <div v-show="showEidt.company_contacts_us" class="item-wrap">
          <div class="item">
            <el-input v-model="form.company_contacts_us" type="input"/>
          </div>
          <div class="bth_save" @click="onSubmit(4)">保存</div>
        </div>
      </el-form-item>
      <el-form-item label="客服电话">
        <div v-show="!showEidt.customer_mobile" class="item-wrap">
          <div class="item">
            {{ form.customer_mobile }}
          </div>
          <div class="edit_info" @click="EidtInfo(5)"> 编辑</div>
        </div>

        <div v-show="showEidt.customer_mobile" class="item-wrap">
          <div class="item">
            <el-input v-model="form.customer_mobile" type="input"/>
          </div>
          <div class="bth_save" @click="onSubmit(5)">保存</div>
        </div>
      </el-form-item>
      <el-form-item label="法人代表">
        <div v-show="!showEidt.legal_person" class="item-wrap">
          <div class="item">
            {{ form.legal_person }}
          </div>
          <div class="edit_info" @click="EidtInfo(6)"> 编辑</div>
        </div>

        <div v-show="showEidt.legal_person" class="item-wrap">
          <div class="item">
            <el-input v-model="form.legal_person" type="input"/>
          </div>
          <div class="bth_save" @click="onSubmit(6)">保存</div>
        </div>
      </el-form-item>
      <el-form-item label="公司介绍">
        <div v-show="!showEidt.company_introduce_en" class="item-wrap">
          <div class="item-textarea">
            {{ form.company_introduce_en }}
          </div>
          <div class="edit_info" @click="EidtInfo(7)"> 编辑</div>
        </div>
        <div v-show="showEidt.company_introduce_en" class="item-wrap">
          <div class="item-textarea">
            <el-input v-model="form.company_introduce_en" autosize type="textarea"/>
          </div>
          <div class="bth_save" @click="onSubmit(7)">保存</div>
        </div>
      </el-form-item>
      <el-form-item label="公司介绍(英)">
        <div v-show="!showEidt.company_introduce_us" class="item-wrap">
          <div class="item-textarea">
            {{ form.company_introduce_us }}
          </div>
          <div class="edit_info" @click="EidtInfo(8)"> 编辑</div>
        </div>
        <div v-show="showEidt.company_introduce_us" class="item-wrap">
          <div contenteditable="true" class="item-textarea">
            <el-input v-model="form.company_introduce_us" autosize type="textarea"/>
          </div>
          <div class="bth_save" @click="onSubmit(8)">保存</div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getServiceInfo, saveServiceInfo, getServiceType, updateUserLogo } from '@/api/serviceinfo'

export default {
  data() {
    return {
      form: {},
      uploadUrl: process.env.BASE_API + '/service/files/uploadOneFile', // 图片上传网址
      token: this.$store.getters.token,
      showEidt: {
        company_address_detail: '',
        company_address_detail_us: '',
        company_contacts: '',
        company_contacts_us: '',
        customer_mobile: '',
        legal_person: '',
        company_introduce_en: '',
        company_introduce_us: ''
      },
      ServiceType: {},
      showServiceType: '',
      companyList: {
        desc: ''
      }
    }
  },
  created() {
    this.getServiceInfo()
  },
  methods: {
    // 头像上传
    handleSuccess(res, file) {
      if (res.data.status === 200) {
        this.form.user_logo = res.data.url
        updateUserLogo(this.form.user_logo).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '头像保存成功'
            })
          } else {
            this.$message({
              type: 'success',
              message: res.msg
            })
          }
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt6M = file.size / 1024 / 1024 < 6

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt6M) {
        this.$message.error('上传图片大小不能超过 6MB!')
      }
      return isJPG && isLt6M
    },
    // 保存数据
    onSubmit(show_number) {
      saveServiceInfo(this.form).then(response => {
        if (response.status === 200) {
          this.show_Edit(show_number, false)
        }
      })
    },
    // 获取服务商的信息
    getServiceInfo() {
      getServiceInfo().then(response => {
        if (response.status === 200) {
          this.form = response.data
          this.isloading = false
          this.getServiceType()
        }
      })
    },
    getServiceType() {
      getServiceType().then(response => {
        if (response.status === 200) {
          this.ServiceType = response.data
          this.showServiceType = ''
          for (let i = 0; i < this.ServiceType.length; i++) {
            for (let j = 0; j < this.form.service_types.length; j++) {
              if (this.ServiceType[i].service_type_id === this.form.service_types[j]) {
                this.showServiceType += this.ServiceType[i].service_type_name + ','
              }
            }
          }
          this.showServiceType = this.showServiceType.slice(0, -1)
        }
      })
    },
    // 编辑打开输入框
    EidtInfo(show_number) {
      this.show_Edit(show_number, true)
    },
    // 控制输入框按钮
    show_Edit(show_number, bool_status) {
      if (bool_status) {
        this.showEidt.company_address_detail = !bool_status
        this.showEidt.company_address_detail_us = !bool_status
        this.showEidt.company_contacts = !bool_status
        this.showEidt.company_contacts_us = !bool_status
        this.showEidt.customer_mobile = !bool_status
        this.showEidt.legal_person = !bool_status
        this.showEidt.company_introduce_en = !bool_status
        this.showEidt.company_introduce_us = !bool_status
      }
      switch (show_number) {
        case 1:
          this.showEidt.company_address_detail = bool_status
          break
        case 2:
          this.showEidt.company_address_detail_us = bool_status
          break
        case 3:
          this.showEidt.company_contacts = bool_status
          break
        case 4:
          this.showEidt.company_contacts_us = bool_status
          break
        case 5:
          this.showEidt.customer_mobile = bool_status
          break
        case 6:
          this.showEidt.legal_person = bool_status
          break
        case 7:
          this.showEidt.company_introduce_en = bool_status
          break
        case 8:
          this.showEidt.company_introduce_us = bool_status
          break
      }
    }
  }
}
</script>

<style rel="stylesheet" lang="scss">
  .setting-container .el-input__inner {
    border: none;
    padding-left: 0;
    font-family: MicrosoftYaHei;
    height: auto;
  }

  .setting-container {
   .avatar-uploader .el-upload {
     border: none;
     background-color: #fff;
   }
    .el-form-item__label {
      height: 28px;
      font-size: 16px;
      color: rgba(102, 102, 102, 1);
      line-height: 28px;
    }
    textarea:focus, input:focus {
      outline: none;
      padding: 0;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      line-height: 26px;
    }
    textarea {
      resize: none;
      overflow-y: auto;
    }
    input, textarea {
      border: none;
      padding: 0;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      line-height: 26px;
    }
  }
</style>
<style rel="stylesheet" lang="scss" scoped>
  textarea:focus, input:focus {
    outline: none;
  }

  input {
    border: none;
  }

  .el-input__inner:focus {
    outline: none;
    border: none;
  }

  .edit_info {
    color: #3297FF;
  }

  .bth_save {
    color: red;
  }

  .setting-container {
    padding: 60px 0;
    display: flex;
    justify-content: center;
  }

  .item-wrap-read {
    width: 460px;
    padding-bottom: 20px;
    padding-right: 60px;
    border-bottom: 1px solid #e9e9e9;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 26px;
  }

  .item-wrap {
    display: flex;
    width: 460px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e9;
    .item {
      width: 400px;
      word-break: break-all;
      margin-right: 20px;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      line-height: 26px;
      input {
        margin-top: -8px;
      }
    }
    .item-textarea {
      font-size: 16px;
      font-family: MicrosoftYaHei;
      color: rgba(51, 51, 51, 1);
      line-height: 26px;
      width: 400px;
      word-break: break-all;
      min-height: 100px;
      margin-right: 20px;
    }
  }

  .avatar-wrap {
    display: flex;
    margin-bottom: 50px;
    justify-content: center;
    .avatar {
      width: 160px;
      height: 160px;
      border: 1px solid #e0e0e0;
      overflow: hidden;
      border-radius: 80px;
    }
  }
</style>
